<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-wrap</title>
    <style type="text/css">
        .flex-container {
            display: flex;
            width: 80vw;
            height: 30vh;
            border: 1px solid blue;
            margin: 25px auto;
        }
        .flex-item {
            width: 30%;
            height: 30%;
            text-align: center;
            font-size: 30px;
        }
        .flex-item:nth-child(odd) {
            background: #6666fa;
        }
        .flex-item:nth-child(even) {
            background: #fa6666;
        }
        .first {
            /* flex-direction: row; */
            /* flex-wrap: nowrap; */
            flex-flow: row nowrap;
        }
        .second {
            /* flex-direction: row; */
            /* flex-wrap: wrap; */
            flex-flow: row wrap;
        }
        .third {
            /* flex-direction: row; */
            /* flex-wrap: wrap-reverse; */
            flex-flow: row wrap-reverse;
        }
        .fourth {
            /* flex-direction: row-reverse; */
            /* flex-wrap: nowrap; */
            flex-flow: row-reverse nowrap;
        }
        .fifth {
            /* flex-direction: row-reverse; */
            /* flex-wrap: wrap; */
            flex-flow: row-reverse wrap;
        }
        .six {
            /* flex-direction: row-reverse; */
            /* flex-wrap: wrap-reverse; */
            flex-flow: row-reverse wrap-reverse;
        }
        .first-c {
            /* flex-direction: column; */
            /* flex-wrap: nowrap; */
            flex-flow: column nowrap;
        }
        .second-c {
            /* flex-direction: column; */
            /* flex-wrap: wrap; */
            flex-flow: column wrap;
        }
        .third-c {
            /* flex-direction: column; */
            /* flex-wrap: wrap-reverse; */
            flex-flow: column wrap-reverse;
        }
        .fourth-c {
            /* flex-direction: column-reverse; */
            /* flex-wrap: nowrap; */
            flex-flow: column-reverse nowrap;
        }
        .fifth-c {
            /* flex-direction: column-reverse; */
            /* flex-wrap: wrap; */
            flex-flow: column-reverse wrap;
        }
        .six-c {
            /* flex-direction: column-reverse; */
            /* flex-wrap: wrap-reverse; */
            flex-flow: column-reverse wrap-reverse;
        }
    </style>
</head>
<body>
    <p> flex-direction : row 和 flex-wrap: nowrap | wrap | wrap-reverse 组合</p>
    <div class="flex-container first">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>
    <div class="flex-container second">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>
    <div class="flex-container third">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>
    <hr>
    <p> flex-direction : row-reverse 和 flex-wrap: nowrap | wrap | wrap-reverse 组合</p>
    <div class="flex-container fourth">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>
    <div class="flex-container fifth">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>
    <div class="flex-container six">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>
    <p> flex-direction : column 和 flex-wrap: nowrap | wrap | wrap-reverse 组合</p>
    <div class="flex-container first-c">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>
    <div class="flex-container second-c">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>
    <div class="flex-container third-c">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>
    <p> flex-direction : column-reverse 和 flex-wrap: nowrap | wrap | wrap-reverse 组合</p>
    <div class="flex-container fourth-c">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>
    <div class="flex-container fifth-c">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>
    <div class="flex-container six-c">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>
</body>
</html>